<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <NavBar :title="'高效办成一件事专区'" :isShowIcon="true" />
    <!-- 标题 -->
    <view class="main-title">
      <text class="title-dot"></text>
      <text class="title-text">{{ paramsData.title }}</text>
    </view>

    <!-- 办理时限卡片 -->
    <view class="deadline-card">
      <view class="deadline-item">
        <text class="label">法定办结时限</text>
        <view class="value-box">
          <text class="value blue">6</text>
          <text class="unit">工作日</text>
        </view>
      </view>
      <view class="com-item">
        <text class="label orange">承诺办结时限</text>
        <view class="com-box">
          <text class="value orange">3</text>
          <text class="unit">工作日</text>
        </view>
      </view>
    </view>
    <view class="deadline-desc">
      <view class="desc-item" v-for="(item, index) in approveList" :key="index">
        <view class="desc-tit">
          <text class="desc-title">{{ item.title }}</text>
        </view>
        <view class="desc-con">
          <text class="desc-title">{{ item.frontTitle }}</text>
          <text class="desc-value">{{ item.afterTitle }}</text>
        </view>
      </view>
    </view>

    <!-- tab切换 -->
    <u-tabs
      :list="tabList"
      :current="tabIndex"
      @change="tabChange"
      lineColor="#1890ff"
      lineWidth="30"
      itemStyle="height: 80rpx;"
      :scrollable="false"
      class="tabs-wrap"
    ></u-tabs>

    <!-- 动态组件内容区 -->
    <view>
      <component :is="tabComps[tabIndex]" />
    </view>

    <!-- 底部操作栏 -->
    <view class="footer-bar">
      <view class="footer-btn-text">
        <u-icon name="question-circle" color="#2979ff" size="20"></u-icon>
        <text class="footer-text">咨询</text>
      </view>
      <view> | </view>
      <view class="footer-btn-online">
        <u-button class="footer-btn" shape="circle" size="small" plain @click="workGuideClick">办事指南</u-button>
        <u-button class="footer-btn online" shape="circle" size="small" @click="onlineClick">在线办理</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import MatterList from '@/pages/guide/matter/index.vue';
import MaterialList from '@/pages/guide/materials/index.vue';
import Acceptance from '@/pages/guide/acceptance/index.vue';

export default {
  components: {
    MatterList,
    MaterialList,
    Acceptance
  },
  data() {
    return {
      tabList: [
        {
          name: '办理事项'
        },
        {
          name: '基本信息'
        },
        {
          name: '办理材料'
        },
        {
          name: '受理条件'
        },
        {
          name: '更多信息'
        }
      ],
      tabComps: ['MatterList', 'MaterialList', 'Acceptance'],
      tabIndex: 0,
      approveList: [
        {
          title: '环节提升率',
          frontTitle: '之后：1个环节',
          afterTitle: '之前：3个环节'
        },
        {
          title: '时间提升率',
          frontTitle: '之后：6个工作日',
          afterTitle: '之前：16个工作日'
        },
        {
          title: '材料减少率',
          frontTitle: '之后：5份材料',
          afterTitle: '之前：11份材料'
        },
        {
          title: '跑动优化率',
          frontTitle: '之后：1次',
          afterTitle: '之前：3次'
        }
      ],
      paramsData: {}
    };
  },
  onLoad(options) {
    if (options) {
      this.paramsData = JSON.parse(decodeURIComponent(options.data));
    }
    // console.log(this.paramsData);
  },
  methods: {
    tabChange(e) {
      this.tabIndex = e.index;
    },
    //办事指南
    workGuideClick() {
      // url: `/pages/guide/${data.path}/index?data=${encodeURIComponent(JSON.stringify(data))}`
      uni.navigateTo({
        url: `/pages/guide/workGuide/index`
      });
    },
    onlineClick() {
      uni.navigateTo({
        url: `/pages/guide/situation/index`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.main-title {
  display: flex;
  align-items: center;
  font-size: 34rpx;
  font-weight: bold;
  margin: 32rpx 0 16rpx 32rpx;
}

.title-dot {
  width: 12rpx;
  height: 30rpx;
  background: #1890ff;
  border-radius: 30%;
  margin-right: 12rpx;
}

.title-text {
  color: #222;
}

.deadline-card {
  display: flex;
  margin: 32rpx;
  justify-content: space-around;
}

.deadline-item {
  border: 1px solid #0079fe;
  border-radius: 12rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
}

.com-item {
  display: flex;
  align-items: center;
  border-radius: 12rpx;
  margin-right: 16rpx;
  border: 1px solid #ff9900;
}

.label {
  color: #0079fe;
  padding-left: 10rpx;
}

.value-box {
  background: #0079fe;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}

.com-box {
  display: flex;
  background: #ff9900;
  padding: 10px;
  box-sizing: border-box;
}

.value {
  font-size: 36rpx;
  font-weight: bold;
  color: #f7f8fa;
}

.value.orange {
  color: #f7f8fa;
}

.label.orange {
  color: #ff9900;
}

.unit {
  font-size: 22rpx;
  color: #f7f8fa;
  margin-left: 10rpx;
}

.deadline-desc {
  display: flex;
  margin: 0 32rpx 24rpx 32rpx;
  justify-content: space-between;
  flex-wrap: wrap;
}

.desc-item {
  border: 1px solid #0079fe;
  margin: 10px 0;
  border-radius: 5px;
  padding: 15px;
  min-width: 30%;
  text-align: center;
  background: #f1f8ff;
}

.desc-title {
  font-size: 20rpx;
  color: #888;
  display: block;
}

.desc-value {
  font-size: 22rpx;
  color: #222;
  margin-top: 4rpx;
}

.tabs-wrap {
  ::v-deep .u-tabs__wrapper__nav__item__text {
    font-size: 26rpx;
  }
}

.matter-title {
  font-size: 28rpx;
  color: #222;
  margin-left: 16rpx;
  background: #e9f2ff;
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  box-shadow: 0 -2rpx 8rpx 0 rgba(0, 0, 0, 0.04);
  z-index: 10;
}

.footer-btn {
  flex: 1;
  margin: 0 12rpx;
}

.footer-btn.online {
  background: #1890ff;
  color: #fff;
  border: none;
}

.footer-btn-text {
  display: flex;
  align-items: center;
}

.footer-btn-online {
  display: flex;
  justify-content: space-between;
  width: 70%;
}

.footer-text {
  margin-left: 5px;
}
</style>
